










<!--
返回数据要求
res.data.data.dataList;   为表格数据
res.data.data.total    数据总条数

使用说明: 如果没有特殊需求只需关心
getColumn
getAxios
<template  v-slot:slot的值="data">
    <Button type="error" size="small"  @click="getData(data.data.row,data.data.index)">Delete</Button>
</template>
两个参数和插槽
-->

<!--
//请求参数确定

getAxios: {
    url:url路径        //请求路径 , 或者传参方式
    method:post/get   //请求方式
    dataList:{}      //请求参数
    firstRequest: false, //初次不加载
------------------------------------
    url:'data'       //或者传参方式  ,这种方式需要在父组件请求数据并且,一次拿到全部数据
    dataList:[{}]    //表格数据比用分页
    firstRequest: false, //初次不加载
}


//column参数列表

getColumn:列表数据
    {  title: 'Age',   //标题
       key: 'age',     //渲染的字段
       slot:"key名"    //表示此列需要使用插槽
       align:center    //列队齐   left 左对齐、right 右对齐和 center 居中对齐
       width: 60,      //列宽
       minWidth:60,    //最小列宽
       maxWidth:60,    //最大列宽
       tooltip:true	   // 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容
       isHidenColumn:true // 不显示这列数据

       ellipsis:true	//开启后，文本将不换行，超出部分显示为省略号
       sortable: true   //此列可以排序,
       fixed: 'left'  //列左固定  固定列 如果需要渲染插槽,请参考iview的runder方法
       resizable:true //当前列可以拖拽改变列宽. 注意width属性必须有值,而且表格添加border属性
       className: 'demo-table-info-column' //列样式
       filters:[]    //根据此项进行过滤,接收一个数组
       filterMultiple: false,  //配置filters时才可以配置此项  过滤单选 ,默认多选,
       filterMethod (value, row) {} //配置filters时才可以配置此项  过滤函数 请参考iview
       children:[]  //可以实现表头合并,参考api
       render:(h, params) => {} 参考api
  },
   //如果列使用了插槽
          <template  v-slot:slot的值="data">
              <Button type="error" size="small"  @click="getData(data.data.row)">Delete</Button>
          </template>




//table参数列表

selection:是否需要选择框
:selectRow.sync="selectRow" :选择数据同步到父组件
:dataList.sync="dataList" :表格数据同步到父组件,不建议用此数据修改表格数据
:allDataList.sync="allDataList" :所有表格数据同步到父组件,不建议用此数据修改表格数据
:disableSelect="{boolean:true,label:'status',value:4 }"   //在selection为true时,让某一状态下的行数据禁止选择   label value 为判断条件
stripe:表格会间隔显示不同颜色，用于区分不同行数据 true
border:添加表格的边框线。true
rowClassName    行样式      .demo-table-info-row td{.ivu-table .demo-table-info-row td{}
height:表格高度,添加高度会固定表头
maxHeight:表格高度,添加高度会固定表头 100%
highlightRow: 高亮某一行,并抛出当前行和上一个高亮行的数据
show-context-menu ：在表格行上右击进行操作
rowKey:表格中嵌套子表格时必须指定值,数据中的唯一标识符  嵌套表格:data中含有children.
showSummary:是否在最后显示计算
size:表格大小 large 或 small 或 default


//table事件列表

@currentChange:向父组件抛出当前行和上一个当前行的数据 注意:当highlightRow属性为true的时候可用
@select:选择一个时抛出的数据
@selectAll:全选时抛出全选数据
@selectionChange:选择发生变化时抛出选择的数据




//子表格返回格式,以及是否使用懒加载
data:表格数据含有子表格的数据,
 {
    name: 'Jim Green',
    age: 25,
    address: 'London No. 1 Lake Park',
    children:[] //表格嵌套 必须指定rowKey的唯一标识符
    cellClassName: {     //设置某一单元格样式,如果有需要请后台返回前台设置样式
        age: 'demo-table-info-cell-age',
        address: 'demo-table-info-cell-address'
    }
 },


   zangxianju
-->
<template>
  <div style="height: 100%" ref="tableBox">
    <Table
      ref="table"
      :selection="selection"
      :columns="getGetColumn"
      :data="dataTable"
      :loading="loading"
      :stripe="stripe"
      :border="border"
      :max-height="maxHeight"
      :highlight-row="highlightRow"
      :show-context-menu="showContextMenu"
      :show-summary="showSummary.boolean"
      :row-key="rowKey"
      :size="size"
      :span-method="handleSpan"
      :load-data="handleLoadData"
      @on-current-change="onCurrentChange"
      @on-select="onSelect"
      @on-select-all="onSelectAll"
      @on-selection-change="onSelectionChange"
    >
      <template
        v-for="(item, index) in getGetColumn"
        :slot="item.slot"
        slot-scope="dataList"
      >
        <slot
          :name="item.slot"
          :data="{ row: dataList.row, index: dataList.row }"
        ></slot>
      </template>
    </Table>
    <CCardFooter
      class="page-link"
      v-if="dataTable.length !== 0 && showPagination"
    >
      <CRow>
        <CCol class="footerPage" style>
          <Page
            :current.sync="pagInation.pageNum"
            :total="pagInation.total"
            :simple="pageSizeBig"
            :page-size="pageSize"
            :page-size-opts="[15, 50, 100, 300, 500, 1000]"
            @on-page-size-change="onPageSizeChange"
            show-total
            show-elevator
            show-sizer
            transfer
          ></Page>
          <!--<span class="pageContent">
                      <div style="margin-top: 10px">每页</div>
                      <CSelect
                        :options="options"
                        :value.sync="pageSize"
                        class="selectStyle"
                        style
                      />
                      <div style="margin-top: 10px">
                        {{ this.pagInation.pageNum }}页(总共{{
                          this.getSunPage
                        }}页， {{ this.pagInation.total }}条记录)
                      </div>
                    </span>
                    <CPagination
                      :activePage.sync="pagInation.pageNum"
                      :pages="getSunPage"getRefreshTable
                      align="end"
                      v-if="pagInation.total != 0"
                    />-->
        </CCol>
      </CRow>
    </CCardFooter>
  </div>
</template>
<script>
export default {
  name: "TableList",
  components: {},
  data() {
    return {
      dataTable: [],
      loading: false,

      pagInation: {
        pageNum: 1,
        total: "",
      },
      maxHeight: "100%",
      sumList: [],
      firstRequest: this.getAxios.firstRequest, //初次不加载
      reficeData: {},
      reficeUrl: {},
    };
  },
  props: {
    getAxios: {
      // 请求方式
      type: Object,
      default() {
        return {};
      },
    },
    getColumn: {
      // 表格列数据
      type: Array,
      default() {
        return [];
      },
    },
    selectRow: {
      // 当前选中的数据
      type: Array,
      default() {
        return [];
      },
    },
    pageSizeBig: {
      // 使用简介模式page
      type: Boolean,
      default() {
        return false;
      },
    },
    selection: {
      // 是否使用选择框
      type: Boolean,
      default() {
        return false;
      },
    },
    disableSelect: {
      // :disableSelect="{boolean:true,label:'status',value:4 }"   //在selection为true时,让某一状态下的行数据禁止选择   label value 为判断条件
      type: Object,
      default() {
        return {
          boolean: false,
          label: "",
          value: [4],
        };
      },
    },
    index: {
      //是否使用 序号
      type: Boolean,
      default() {
        return true;
      },
    },
    pageSize: {
      // 默认每页的条数
      type: Number,
      default() {
        return 15;
      },
    }, //每页多少条
    showSummary: {
      // 显示表格最后的总计
      type: Object,
      default() {
        return {
          boolean: false,
          text: "总计",
          height: 55,
        };
      },
    },
    showPagination: {
      // 是否显示换页
      type: Boolean,
      default() {
        return true;
      },
    },
    permissionRender: {
      //是否进行权限循环
      type: Boolean,
      default() {
        return true;
      },
    },
    //是否合并表格,并确定合并的列
    handleSpanData: {
      type: Object,
      default() {
        return {
          handleSpanBoolean: false,
          columnIndex: 1,
          columnName: "",
        };
      },
    },

    // 运行选中回显如果未true 则 onlyItemData 必须要有字段
    countSelectShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    onlyItemData: {
      // 回显选项的时候使用
      type: String,
      default() {
        return "id";
      },
    },
    /*——————————————————一下不常用—————————————————— */

    rowClassName: {
      // 行样式
      type: String,
      default() {
        return "";
      },
    },
    border: {
      type: Boolean,
      default() {
        return true;
      },
    },
    stripe: {
      //是否显示间隔斑马纹
      type: Boolean,
      default() {
        return true;
      },
    },
    showContextMenu: {
      // 点击右键弹出菜单，需配合 slot contextMenu 一起使用，详见示例
      type: Boolean,
      default() {
        return false;
      },
    },
    size: {
      //表格尺寸
      type: String,
      default() {
        return "default";
      },
    },
    highlightRow: {
      type: Boolean,
      default() {
        return true;
      },
    },
    height: {
      // 表格高度
      type: String,
      default() {
        return "100%";
      },
    },
    rowKey: {
      type: String | Boolean,
      default() {
        return false;
      },
    },
  },
  computed: {
    getSunPage() {
      if (this.pagInation.total) {
        return Math.ceil(this.pagInation.total / this.pageSize);
      }
    },
    screenHeight() {
      return this.$store.state.screenHeight;
    },
    getGetColumn() {
      if (this.selection && this.index) {
        this.getColumn.unshift(
          { type: "selection", width: 70, align: "center" },
          { title: "序号", type: "index", width: 70, align: "center" }
        );
        return this.addMinWidth(this.getColumn);
        //  return this.getColumn;
      } else if (this.selection) {
        this.getColumn.unshift({
          type: "selection",
          width: 60,
          align: "center",
        });
        return this.addMinWidth(this.getColumn);
        // return this.getColumn;
      } else if (this.index) {
        this.getColumn.unshift({
          title: "序号",
          type: "index",
          width: 70,
          align: "center",
        });
        return this.addMinWidth(this.getColumn);
        //return this.getColumn;
      } else {
        return this.addMinWidth(this.getColumn);
        // return this.getColumn;
      }
    },
  },
  created() {
    this.getTaskTableData(this.getAxios.dataList);
  },
  mounted() {
    if (this.$refs.tableBox) {
      if (this.showSummary.boolean) {
        this.maxHeight =
          parseInt(
            window.getComputedStyle(this.$refs.tableBox, null)["height"]
          ) - this.showSummary.height;
      } else {
        this.maxHeight = parseInt(
          window.getComputedStyle(this.$refs.tableBox, null)["height"]
        );
      }
    }
  },
  methods: {
    //查询表格数据，只是用与初次查询
    getTaskTableData(data = {}, path = {}) {
      console.log(data,"dd")
      console.log(path,"path")
      let that = this;
      if (typeof data != "object" || data.currentPageNum !== true) {
        that.loading = true;
      }
      if (that.getAxios.url && that.getAxios.url !== "data") {
        //实现初次不加载
        // if (that.firstRequest === false) {
        //   that.firstRequest = true;
        //   return;
        // }

        // 首次加载的参数 ， 刷新时传进来的参数，刷新的时候传进来的参数  ，pageNum ， pageSize

        let param = Object.assign(
          that.reficeData,
          data,
          { pageNum: this.showPagination ? this.pagInation.pageNum : "" },
          { pageSize: this.showPagination ? this.pageSize : "" }
        );

        this.pageSize = param.pageSize;
        console.log("首次加载的参数",param,that.getAxios.url)
        that.http[path.method ? path.method : that.getAxios.method](
          path.url ? path.url : that.getAxios.url,
          param
        ).then((res) => {

            // that.dataTable = [];
            //成功后进行赋值 permissionList
            if (res.data.data && res.data.data.dataList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.dataList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.dataList;
            } else if (res.data.data && res.data.data.dictCodeList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.dictCodeList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.dictCodeList;   nodeList
            } else if (res.data.data && res.data.data.userList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.userList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.userList;
            }else if(res.data.data && res.data.data.result){
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.result,
                that.onlyItemData
              );
            }else if(res.data.data && res.data.data.nodeGroupList){
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.nodeGroupList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.userList;
            }else if(res.data.data && res.data.data.shareStorageList){
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.shareStorageList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.userList;
            }else if (res.data.data && res.data.data.nodeList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.nodeList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.userList;
            }
            else if (res.data.data && res.data.data.resourceList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.resourceList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.resourceList;
            }
            else if (res.data.data && res.data.data.records) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.records,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.userList;
            }
            else if (res.data.data && res.data.data.roleList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.roleList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.roleList;
            } else if (res.data.data && res.data.data.clusterNodeList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.clusterNodeList,
                that.onlyItemData
              );
              //that.dataTable = res.data.data.clusterNodeList;
            } else if (res.data.data && res.data.data.permissionList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.permissionList,
                that.onlyItemData
              );
              // that.dataTable = res.data.data.permissionList;  businessList
            } else if (res.data.data && res.data.data.dictCodeList) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.dictCodeList,
                that.onlyItemData
              );
              //  that.dataTable = res.data.data.dictCodeList;
            }else if (res.data.data && res.data.data.serviceList) {
              that.dataTable = that.showSelectStatus(
                      that.selectRow,
                      res.data.data.serviceList,
                      that.onlyItemData
              );
              //  that.dataTable = res.data.data.dictCodeList;
            }
            else if (
              res.data.data &&
              res.data.data.list &&
              res.data.data.list.length != 0 &&
              res.data.data.list.length != undefined
            ) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data.list,
                that.onlyItemData
              );
              // that.dataTable = res.data.data.list;
            } else if (
              res.data.data &&
              res.data.data.length != 0 &&
              res.data.data.length != undefined
            ) {
              that.dataTable = that.showSelectStatus(
                that.selectRow,
                res.data.data,
                that.onlyItemData
              );
              //that.dataTable = res.data.data;
            } else {
              that.dataTable = [];
            }
            //赋值总条数
            if (res.data.data && res.data.data.total) {
              that.pagInation.total = res.data.data.total;
            } else if (res.data.data && res.data.size) {
              that.pagInation.total = res.data.size;
            } else if (res.data.data && res.data.data.count) {
              that.pagInation.total = res.data.data.count;
            }
            //表格合并才会执行
            if (that.handleSpanData.handleSpanBoolean) {
              that.getSameColumn();
            }
          that.loading = false;
        }).catch((err)=>{
          if (err.data.code===401 && err.data.message==="Cluster Node count is more than authorize count") {
            that.$Message.error("授权已过期，请重新申请授权!")
          }else {
            that.$Message.error(err.data.message)
          }
        });
      } else {
        that.dataList = that.getAxios.dataList;
        //表格合并才会执行
        if (that.handleSpanData.handleSpanBoolean) {
          that.getSameColumn();
        }
        that.loading = false;
      }
    },
    //搜索和刷新列表

    getRefreshTable(data = {}, path = {}) {
      /*
       * data :请求参数
       * data.currentPageNum :true   //当其为true时表示刷新当前页，不会跳转到第一页 并且不显示loading
       * path.method：请求方法
       * path.url:请求路径
       * */
      console.log(data,"data")
      console.log(path,"data1")
      this.reficeData = data;
      this.reficeUrl = path;
      if (typeof data != "object" || data.currentPageNum !== true) {
        this.pagInation.pageNum = 1;
      }
      this.getTaskTableData(data, path);
    },
    //导出全部的表格数据
    exportTableData(data = {}, path = {}) {
      let that = this;
      if (that.getAxios.url && that.getAxios.url !== "data") {
        //实现初次不加载
        // if (that.firstRequest === false) {
        //   that.firstRequest = true;
        //   return;
        // }
        // 首次加载的参数 ， 刷新时传进来的参数，刷新的时候传进来的参数  ，pageNum ， pageSize
        let param = Object.assign(
          that.getAxios.dataList,
          data,
          { pageNum: "" },
          { pageSize: "" }
        );
        that.http[path.method ? path.method : that.getAxios.method](
          path.url ? path.url : that.getAxios.url,
          param
        ).then((res) => {
          if (res.data.code == 0 || res.data.success || res.status === 200) {
            that.$emit("update:allDataList", res); //绑定的方式导出
          } else {
            that.$Message.error("查询失败");
          }
        });
      } else {
        that.dataList = that.getAxios.dataList;
        //表格合并才会执行
        if (that.handleSpanData.handleSpanBoolean) {
          that.getSameColumn();
        }
      }
    },
    //异步渲染子表格数据     参数 当前行数据,回调函数
    handleLoadData(row, callback) {},
    /*
     * 一下为抛出函数,可以向父组件传值
     * */
    //选择发生变化时抛出的数据
    onSelectionChange(data) {
      this.$emit("update:selectRow", data); //绑定的方式导出,双向的导出，
      this.$emit("selectionChange", data); //事件的方式导出 ，之同步到父组件中，
    },
    //全选时抛出的数据
    onSelectAll(data) {
      this.$emit("selectAll", data);
    },
    //选择一个时抛出的数据
    onSelect(seleData, row) {
      this.$emit("select", seleData, row);
    },
    //高亮时抛出的数据
    onCurrentChange(newRow, oldRow) {
      this.$emit("currentChange", newRow, oldRow);
    },
    // 每页多少条数据发生改变时
    onPageSizeChange(data) {
      this.pageSize = data;
    },

    /*
     * 一下为工具函数,可供父组件调用
     * */

    //调用此方法可以清除已经选择的行
    handleClearCurrentRow() {
      this.$refs.table.clearCurrentRow();
    },
    //调用此方法可以全选true或取消全选false
    handleSelectAll(status) {
      this.$refs.table.selectAll(status);
    },
    //导出文件为excel
    exportExcel(param, data = {}) {
      /*
       * param:{
       * fileName:"sdfg.doc" //加上文件后缀
       * method:"get", //请求方法
       * url:""   //请求路径
       * }
       *data:{}  //请求参数
       * */
      if (!param.url) {
        return;
      }
      let that = this;
      let fileName = param.fileName ? param.fileName : new Date() + ".xls";
      that.http[param.method](param.url, data).then((res) => {
        if (
          res.data.code == 0 ||
          res.data.status == "200" ||
          res.status == "200"
        ) {
          if ("msSaveOrOpenBlob" in navigator) {
            //兼容ie
            var blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            window.navigator.msSaveOrOpenBlob(blob, fileName);
            return;
          } else {
            //
            var elink = document.createElement("a");
            // 设置下载文件名
            elink.download = fileName;
            elink.style.display = "none";
            let blob = new Blob([res]);
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            // 模拟点击事件
            elink.click();
            document.body.removeChild(elink);
          }
        } else {
          that.$Message.error("查询失败");
        }
      });
    },
    //导出表格文件 文件格式  .csv
    exportData(dataName) {
      this.$refs.table.exportCsv({ filename: dataName });
    },
    //工具函数,获取相同的列
    getSameColumn() {
      let that = this;
      let nameStartIndex = 0; //相同名称开始的索引
      let nameEndIndex = 0; //相同名称结束的索引
      let nameList = ""; //  名字
      that.sumList = [];
      that.dataTable.forEach((item, index) => {
        if (!index) {
          nameList = item[that.handleSpanData.columnName];
        }
        if (item[that.handleSpanData.columnName] !== nameList && index !== 0) {
          nameEndIndex = index - 1;
          that.sumList.push({ nameStartIndex, nameEndIndex });
          nameStartIndex = index;
          nameList = item[that.handleSpanData.columnName];
        }
      });
      that.sumList.push({
        nameStartIndex: nameStartIndex,
        nameEndIndex: that.dataTable.length,
      });
    },
    //合并表格
    handleSpan({ row, column, rowIndex, columnIndex }) {
      let that = this;
      if (that.handleSpanData.handleSpanBoolean) {
        for (var i = 0; i < that.sumList.length; i++) {
          if (
            that.sumList[i].nameEndIndex - that.sumList[i].nameStartIndex >
            0
          ) {
            if (
              rowIndex === that.sumList[i].nameStartIndex &&
              columnIndex === that.handleSpanData.columnIndex
            ) {
              return {
                rowspan:
                  that.sumList[i].nameEndIndex -
                  that.sumList[i].nameStartIndex +
                  1,
                colspan: that.handleSpanData.columnIndex,
              };
            } else if (
              rowIndex > that.sumList[i].nameStartIndex &&
              rowIndex <= that.sumList[i].nameEndIndex &&
              columnIndex === that.handleSpanData.columnIndex
            ) {
              return {
                rowspan: 0,
                colspan: 0,
              };
            }
          }
        }
      }
    },
    //为列项添加最小宽度
    addMinWidth(data) {
      let dataList = data.filter((item) => {
      /*  if (!(item.width || item.maxWidth || item.minWidth)) {
          this.$set(item, "minWidth", 250);
        }*/
        return item.isHidenColumn !== true;
      });
      return dataList;
    },
    // 存在select的时候，进行已经选中的数据进行回显选中
    showSelectStatus(selectRow, tableData, onlyItemData) {
      // 选中的数据，表格数据
      let that = this;

      if (that.countSelectShow) {
        tableData.forEach((item) => {
          let ifTrue = selectRow.some((selectItem) => {
            return selectItem[onlyItemData] === item[onlyItemData];
          });
          if (ifTrue) {
            that.$set(item, "_checked", true);
          }
        });
        return tableData;
      } else {
        return tableData;
      }
    },
  },
  watch: {
    //改变每页条数,重新查询数据
    pageSize(newData) {
      this.getRefreshTable(this.reficeData, this.reficeUrl);
    },
    getAxios: {
      handler(newVal){
        console.log("getAxios",newVal)
        this.getAxios.url = newVal.url;
        this.getAxios.method = newVal.method;
        this.getAxios.dataList = newVal.dataList;
        this.getTaskTableData(this.reficeData, this.reficeUrl);
      },
      deep: true
    },
    //当前页改变
    ["pagInation.pageNum"]: {
      //深度监视
      handler(newName, oldName) {
        this.getTaskTableData(this.reficeData, this.reficeUrl);
      },
    },
    screenHeight: {
      handler(newName) {
        if (this.$refs.tableBox) {
          if (this.showSummary.boolean) {
            this.maxHeight =
              parseInt(
                window.getComputedStyle(this.$refs.tableBox, null)["height"]
              ) - this.showSummary.height;
          } else {
            this.maxHeight = parseInt(
              window.getComputedStyle(this.$refs.tableBox, null)["height"]
            );
          }
        }
      },
      immediate: true,
    },
    dataTable: {
      handler(newName) {
        let that = this;
        if (that.disableSelect.boolean && that.selection) {
          that.dataTable.forEach((item) => {
            let numList = that.disableSelect.value.findIndex((dataNUm) => {
              return item[that.disableSelect.label] == dataNUm;
            });
            if (numList !== -1) {
              that.$set(item, "_disabled", true); //对象增加属性  或者修改属性
            }
          });
        }
        if (that.permissionRender) {
          that.$nextTick(function () {
            that.GlobalPermissionRender.render();
          });
        }
        that.$emit("update:dataList", newName); //绑定的方式导出
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style scoped>
footer.page-link {
  z-index: 10;
  width: calc(100% - 40px);
  padding: 0;
  margin: 0;
  border: 0;
  bottom: 13px;
  padding-top: 13px;
  border-top: 1px solid #dcdee2;
  position: absolute;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-right: 26px;
  font-size: 14px;
}

.selectStyle {
  width: 100px;
}

/deep/.ivu-table-wrapper-with-border {
  width: 100%;
}
/deep/ .form-group {
  margin: 0 10px;
}
/deep/.ivu-table-header thead tr th {
  text-align: center;
}
/deep/.ivu-table td,
.ivu-table th {
  height: 40px;
}
/deep/.card-footer {
  height: 52px;
}

/deep/th .ivu-table-cell {
  padding: 0 5px;
}
</style>
<style>
.ivu-table-border:after {
  position: static;
  width: 0;
}
</style>
<!--
/deep/.ivu-table td.centerText{
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

{
title: "用户名",
key: "show_userName",
slot: "show_userName",
width: 100,
className: 'centerText'
},

getAxios: {
url: this.GlobalUrlPath.sthxTaskTaskInfo.query, //请求路径
method:"get" , //请求方式
dataList:{status: "8",} //请求参数
},

-->


























<!--





&lt;!&ndash;
返回数据要求
res.data.data.dataList;   为表格数据
res.data.data.total    数据总条数

使用说明: 如果没有特殊需求只需关心
getColumn
getAxios
<template  v-slot:slot的值="data">
    <Button type="error" size="small"  @click="getData(data.data.row,data.data.index)">Delete</Button>
</template>
两个参数和插槽
&ndash;&gt;
&lt;!&ndash;
//请求参数确定

getAxios: {
    url:url路径        //请求路径 , 或者传参方式
    method:post/get   //请求方式
    dataList:{}      //请求参数
    firstRequest: false, //初次不加载
&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;
    url:'data'       //或者传参方式  ,这种方式需要在父组件请求数据并且,一次拿到全部数据
    dataList:[{}]    //表格数据比用分页
    firstRequest: false, //初次不加载
}


//column参数列表

getColumn:列表数据
    {  title: 'Age',   //标题
       key: 'age',     //渲染的字段
       slot:"key名"    //表示此列需要使用插槽
       align:center    //列队齐   left 左对齐、right 右对齐和 center 居中对齐
       width: 60,      //列宽
       minWidth:60,    //最小列宽
       maxWidth:60,    //最大列宽
       tooltip:true	   // 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容

       ellipsis:true	//开启后，文本将不换行，超出部分显示为省略号
       sortable: true   //此列可以排序,
       fixed: 'left'  //列左固定  固定列 如果需要渲染插槽,请参考iview的runder方法
       resizable:true //当前列可以拖拽改变列宽. 注意width属性必须有值,而且表格添加border属性
       className: 'demo-table-info-column' //列样式
       filters:[]    //根据此项进行过滤,接收一个数组
       filterMultiple: false,  //配置filters时才可以配置此项  过滤单选 ,默认多选,
       filterMethod (value, row) {} //配置filters时才可以配置此项  过滤函数 请参考iview
       children:[]  //可以实现表头合并,参考api
       render:(h, params) => {} 参考api
  },
   //如果列使用了插槽
          <template  v-slot:slot的值="data">
              <Button type="error" size="small"  @click="getData(data.data.row)">Delete</Button>
          </template>




//table参数列表

selection:是否需要选择框
:selectRow.sync="selectRow" :选择数据同步到父组件
:dataList.sync="dataList" :表格数据同步到父组件,不建议用此数据修改表格数据
:allDataList.sync="allDataList" :所有表格数据同步到父组件,不建议用此数据修改表格数据
:disableSelect="{boolean:true,label:'status',value:4 }"   //在selection为true时,让某一状态下的行数据禁止选择   label value 为判断条件
stripe:表格会间隔显示不同颜色，用于区分不同行数据 true
border:添加表格的边框线。true
rowClassName    行样式      .demo-table-info-row td{.ivu-table .demo-table-info-row td{}
height:表格高度,添加高度会固定表头
maxHeight:表格高度,添加高度会固定表头 100%
highlightRow: 高亮某一行,并抛出当前行和上一个高亮行的数据
show-context-menu ：在表格行上右击进行操作
rowKey:表格中嵌套子表格时必须指定值,数据中的唯一标识符  嵌套表格:data中含有children.
showSummary:是否在最后显示计算
size:表格大小 large 或 small 或 default


//table事件列表

@currentChange:向父组件抛出当前行和上一个当前行的数据 注意:当highlightRow属性为true的时候可用
@select:选择一个时抛出的数据
@selectAll:全选时抛出全选数据
@selectionChange:选择发生变化时抛出选择的数据




//子表格返回格式,以及是否使用懒加载
data:表格数据含有子表格的数据,
 {
    name: 'Jim Green',
    age: 25,
    address: 'London No. 1 Lake Park',
    children:[] //表格嵌套 必须指定rowKey的唯一标识符
    cellClassName: {     //设置某一单元格样式,如果有需要请后台返回前台设置样式
        age: 'demo-table-info-cell-age',
        address: 'demo-table-info-cell-address'
    }
 },


   zangxianju
&ndash;&gt;
<template>
<div  style="height: 100%;"  ref="tableBox">
    <Table
            ref="table"
            :selection="selection"
            :columns="getGetColumn"
            :data="dataTable"
            :loading="loading"
            :stripe="stripe"
            :border ="border"
            :max-height="maxHeight"
            :highlight-row="highlightRow"
            :show-context-menu="showContextMenu"
            :show-summary="showSummary.boolean"
            :row-key="rowKey"
            :size="size"
            :span-method="handleSpan"
            :load-data="handleLoadData"
            @on-current-change="onCurrentChange"
            @on-select="onSelect"
            @on-select-all="onSelectAll"
            @on-selection-change="onSelectionChange"
    >
         <template v-for="(item,index) in getGetColumn"   :slot="item.slot" slot-scope="dataList" >
            <slot   :name="item.slot" :data="{row:dataList.row ,index:dataList.row}" ></slot>
         </template>
    </Table>
    <CCardFooter class="page-link"  v-if="dataTable.length!==0&&showPagination">
            <CRow>
                <CCol class="footerPage" style>
                    <Page
                        :current.sync="pagInation.pageNum"
                        :total="pagInation.total"
                        :page-size="pageSize"
                        :page-size-opts="[15, 30, 50, 100]"
                        @on-page-size-change="onPageSizeChange"
                        show-total
                        show-elevator
                        show-sizer
                        transfer
                    ></Page>
                    &lt;!&ndash;
                                  <span class="pageContent">
                                    <div style="margin-top: 10px">每页</div>
                                    <CSelect
                                            :options="options"
                                            :value.sync="pageSize"
                                            class="selectStyle"
                                            style
                                    />
                                    <div style="margin-top: 10px">
                                        条记录。第{{ this.pagInation.pageNum }}页(总共{{ this.getSunPage }}页， {{this.pagInation.total}}条记录)
                                    </div>
                                  </span>
                                        <CPagination
                                            :activePage.sync="pagInation.pageNum"
                                            :pages="getSunPage"
                                            align="end"
                                            v-if="pagInation.total != 0"
                                        />
                    &ndash;&gt;
                </CCol>
            </CRow>
        </CCardFooter>
</div>
</template>
<script>

    export default {
        name: "TableList",
        components: {},
        data() {
            return {
                dataTable: [],
                loading: false,
                pageSize:15,  //每页多少条
                pagInation:{
                    pageNum:1,
                    total: ""
                },
                maxHeight: "100%",
                sumList: [],
                firstRequest: this.getAxios.firstRequest, //初次不加载

                reficeData: {},
                reficeUrl: {},
            };
        },
        props: {
            getAxios: {
                type: Object,
                default() {
                    return {};
                }
            },
            getColumn: {
                type: Array,
                default() {
                    return []
                }
            },
            selectRow: {
                type: Array,
                default() {
                    return []
                }
            },
            height:{
                type: String,
                default() {
                    return "100%";
                }
            },

            rowKey: {
                type: String,
                default() {
                    return "id";
                }
            },
            highlightRow:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            selection:{
                type: Boolean,
                default() {
                    return false;
                }
            },
            disableSelect:{
                type: Object,
                default() {
                    return {
                        boolean:false,
                        label:"",
                        value: [4],

                    };
                }
            },

            index:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            showContextMenu:{
                type: Boolean,
                default() {
                    return false;
                }
            },
            stripe:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            border:{
                type: Boolean,
                default() {
                    return true;
                }
            },
            rowClassName:{
                type: String,
                default() {
                    return "";
                }
            },
            size:{
                type: String,
                default() {
                    return "default";
                }
            },
            showSummary:{
                type: Object,
                default() {
                    return {
                        boolean:false,
                        text:"总计",
                        height: 55,
                    };
                }
            },
            permissionRender: {   //是否进行权限循环
                type: Boolean,
                default() {
                    return true;
                }
            },
            showPagination: {
                type: Boolean,
                default() {
                    return true;
                }
            },
            options: {
                type: Array,
                default() {
                    return [10,15,20,25]
                }
            },
            //是否合并表格,并确定合并的列
            handleSpanData:{
                type: Object,
                default() {
                    return {
                        handleSpanBoolean:false,
                        columnIndex:1,
                        columnName: ""
                    };
                }
            }
        },
        computed: {
            getSunPage() {
                if (this.pagInation.total) {
                    return Math.ceil( this.pagInation.total / this.pageSize)
                }
            },
            screenHeight() {
                return this.$store.state.screenHeight
            },
            getGetColumn() {
                if (this.selection && this.index) {
                    this.getColumn.unshift({type: 'selection', width: 60, align: 'center'}, {title:'序号',type: 'index', width: 60, align: 'center'},)
                    this.addMinWidth(this.getColumn)
                    return  this.getColumn;
                }else if (this.selection) {
                    this.getColumn.unshift({type: 'selection', width: 60, align: 'center'});
                    this.addMinWidth(this.getColumn)
                    return this.getColumn;
                }else if (this.index) {
                    this.getColumn.unshift({title: '序号', type: 'index', width: 70, align: 'center'},);
                    this.addMinWidth(this.getColumn)
                    return  this.getColumn;
                } else {
                    this.addMinWidth(this.getColumn)
                    return  this.getColumn;
                }
            }
        },
         created() {
            this.getTaskTableData(this.getAxios.dataList,);
         },
        mounted() {
            if (this.$refs.tableBox ) {
                if (this.showSummary.boolean) {
                    this.maxHeight = parseInt(window.getComputedStyle(this.$refs.tableBox, null)["height"])-this.showSummary.height;
                } else {
                    this.maxHeight=parseInt(window.getComputedStyle(  this.$refs.tableBox , null)["height"]);
                }
            }
        },
        methods: {
            //查询表格数据，只是用与初次查询
            getTaskTableData(data = {}, path = {},) {
                let that = this;
                if ((typeof data != "object")||data.currentPageNum!==true) {
                    that.loading = true;
                }
                if (that.getAxios.url && that.getAxios.url !== "data") {
                    //实现初次不加载
                    if (that.firstRequest === false) {
                        that.firstRequest = true;
                        return;
                    }
                    // 首次加载的参数 ， 刷新时传进来的参数，刷新的时候传进来的参数  ，pageNum ， pageSize
                    let param = Object.assign(that.reficeData, data, {pageNum: this.showPagination ? this.pagInation.pageNum : ""}, {pageSize: this.showPagination ? this.pageSize : ""},);
                    this.pageSize = param.pageSize
                    that.http[path.method ? path.method : that.getAxios.method](path.url ? path.url : that.getAxios.url, param).then((res) => {
                        if (res.data.code == 0 || res.data.success) {
                            // that.dataTable = [];
                            //成功后进行赋值 permissionList
                            if (res.data.data && res.data.data.dataList) {
                                that.dataTable = res.data.data.dataList;
                            } else if (res.data.data && res.data.data.dictCodeList) {
                                that.dataTable = res.data.data.dictCodeList;
                            } else if (res.data.data && res.data.data.userList) {
                                that.dataTable = res.data.data.userList;
                            } else if (res.data.data && res.data.data.roleList) {
                                that.dataTable = res.data.data.roleList;
                            } else if (res.data.data && res.data.data.clusterNodeList) {
                                that.dataTable = res.data.data.clusterNodeList;
                            } else if (res.data.data && res.data.data.permissionList) {
                                that.dataTable = res.data.data.permissionList;
                            } else if (res.data.data && res.data.data.dictCodeList) {
                                that.dataTable = res.data.data.dictCodeList;
                            } else if (res.data.data.list && res.data.data.list.length != 0 && res.data.data.list.length != undefined) {
                                that.dataTable = res.data.data.list;
                            } else if (res.data.data.length != 0 && res.data.data.length != undefined) {
                                that.dataTable = res.data.data;
                            } else {
                                that.dataTable = [];
                            }
                            //赋值总条数
                            if (res.data.data.total) {
                                that.pagInation.total = res.data.data.total;
                            } else if (res.data.size) {
                                that.pagInation.total = res.data.size;
                            }else if (res.data.count) {
                                that.pagInation.total = res.data.count;
                            }

                            //表格合并才会执行
                            if (that.handleSpanData.handleSpanBoolean) {
                                that.getSameColumn();
                            }
                        } else {
                            that.$Message.error("查询失败");
                        }
                        that.loading = false;
                    });
                } else {
                    that.dataList = that.getAxios.dataList
                    //表格合并才会执行
                    if (that.handleSpanData.handleSpanBoolean) {
                        that.getSameColumn();
                    }
                    that.loading = false;
                }
            },

            //搜索和刷新列表  跳转到第一页
            getRefreshTable(data = {}, path = {}) {
                /*
                * data :请求参数
                * data.currentPageNum :true   //当其为true时表示刷新当前页，不会跳转到第一页
                *
                * path.method：请求方法
                * path.url:请求路径
                * */
                this.reficeData = data;
                this.reficeUrl = path;
                if ((typeof data != "object")||data.currentPageNum!==true) {
                    this.pagInation.pageNum = 1;
                }

                this.getTaskTableData(data, path);
            },


            //导出全部的表格数据
            exportTableData(data = {}, path = {}) {
                let that = this;
                if (that.getAxios.url && that.getAxios.url !== "data") {
                    //实现初次不加载
                    if (that.firstRequest === false) {
                        that.firstRequest = true;
                        return;
                    }
                    // 首次加载的参数 ， 刷新时传进来的参数，刷新的时候传进来的参数  ，pageNum ， pageSize
                    let param = Object.assign(that.getAxios.dataList, data, {pageNum: ""}, {pageSize: ""},);
                    that.http[path.method ? path.method : that.getAxios.method](path.url ? path.url : that.getAxios.url, param).then((res) => {
                        if (res.data.code == 0 || res.data.success || res.status === 200) {
                            that.$emit('update:allDataList', res)   //绑定的方式导出
                        } else {
                            that.$Message.error("查询失败");
                        }
                    });
                } else {
                    that.dataList = that.getAxios.dataList
                    //表格合并才会执行
                    if (that.handleSpanData.handleSpanBoolean) {
                        that.getSameColumn();
                    }
                }
            },

            //异步渲染子表格数据     参数 当前行数据,回调函数
            handleLoadData(row, callback) {
            },


            /*
            * 一下为抛出函数,可以向父组件传值
            * */
            //选择发生变化时抛出的数据
            onSelectionChange(data) {
                this.$emit('update:selectRow', data)   //绑定的方式导出
                this.$emit("selectionChange", data)     //事件的方式导出
            },
            //全选时抛出的数据
            onSelectAll(data) {
                this.$emit("selectAll", data)
            },
            //选择一个时抛出的数据
            onSelect(seleData, row) {
                this.$emit("select", seleData, row)
            },
            //高亮时抛出的数据
            onCurrentChange(newRow, oldRow) {
                this.$emit("currentChange", newRow, oldRow)
            },

            // 每页多少条数据发生改变时
            onPageSizeChange(data) {
                this.pageSize = data;
            },






            /*
            * 一下为工具函数,可供父组件调用
            * */
            //调用此方法可以清除已经选择的行
            handleClearCurrentRow() {
                this.$refs.table.clearCurrentRow();
            },

            //调用此方法可以全选true或取消全选false
            handleSelectAll(status) {
                this.$refs.table.selectAll(status);
            },

            //导出文件为excel
            exportExcel(param, data = {}) {
                /*
                * param:{
                * fileName:"sdfg.doc" //加上文件后缀
                * method:"get", //请求方法
                * url:""   //请求路径
                * }
                *data:{}  //请求参数
                * */
                if (!param.url) {
                    return
                }
                let that = this
                let fileName = param.fileName ? param.fileName : new Date() + '.xls'
                that.http[param.method](param.url, data).then((res) => {
                    if (res.data.code == 0 || res.data.status == "200" || res.status == "200") {
                        if ('msSaveOrOpenBlob' in navigator) {//兼容ie
                            var blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
                            window.navigator.msSaveOrOpenBlob(blob, fileName);
                            return;
                        } else {
                            //
                            var elink = document.createElement("a");
                            // 设置下载文件名
                            elink.download = fileName;
                            elink.style.display = "none";
                            let blob = new Blob([res]);
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            // 模拟点击事件
                            elink.click();
                            document.body.removeChild(elink);
                        }
                    } else {
                        that.$Message.error("查询失败");
                    }
                });
            },

            //导出表格文件 文件格式  .csv
            exportData(dataName) {
                this.$refs.table.exportCsv({filename: dataName});
            },

            //工具函数,获取相同的列
            getSameColumn() {
                let that = this;
                let nameStartIndex = 0;  //相同名称开始的索引
                let nameEndIndex = 0;  //相同名称结束的索引
                let nameList = "";    //  名字
                that.sumList = [];
                that.dataTable.forEach((item, index) => {
                    if (!index) {
                        nameList = item[that.handleSpanData.columnName]
                    }
                    if (item[that.handleSpanData.columnName] !== nameList && index !== 0) {
                        nameEndIndex = index - 1;
                        that.sumList.push({nameStartIndex, nameEndIndex})
                        nameStartIndex = index;
                        nameList = item[that.handleSpanData.columnName];
                    }
                });
                that.sumList.push({"nameStartIndex": nameStartIndex, "nameEndIndex": that.dataTable.length})
            },

            //合并表格
            handleSpan({row, column, rowIndex, columnIndex}) {
                let that = this;
                if (that.handleSpanData.handleSpanBoolean) {
                    for (var i = 0; i < that.sumList.length; i++) {
                        if (that.sumList[i].nameEndIndex - that.sumList[i].nameStartIndex > 0) {
                            if (rowIndex === that.sumList[i].nameStartIndex && columnIndex === that.handleSpanData.columnIndex) {
                                return {
                                    rowspan: that.sumList[i].nameEndIndex - that.sumList[i].nameStartIndex + 1,
                                    colspan: that.handleSpanData.columnIndex
                                };
                            } else if ((rowIndex > that.sumList[i].nameStartIndex && rowIndex <= that.sumList[i].nameEndIndex) && columnIndex === that.handleSpanData.columnIndex) {
                                return {
                                    rowspan: 0,
                                    colspan: 0,
                                };
                            }
                        }

                    }
                }
            },


            //为列项添加最小宽度
            addMinWidth(data) {
                data.forEach((item) => {
                    if (!(item.width || item.maxWidth || item.minWidth)) {
                        this.$set(item, "minWidth", 250)
                    }
                })

            }

        },
        watch: {
            //改变每页条数,重新查询数据
            pageSize(newData) {
                this.getRefreshTable(this.reficeData,this.reficeUrl);
            },
            //当前页改变
            ["pagInation.pageNum"]: { //深度监视
                handler(newName, oldName) {
                    this.getTaskTableData(this.reficeData,this.reficeUrl);
                },
            },
            "screenHeight":{
                handler(newName) {
                    if (this.$refs.tableBox ) {
                        if (this.showSummary.boolean) {
                            this.maxHeight = parseInt(window.getComputedStyle(this.$refs.tableBox, null)["height"])-this.showSummary.height ;
                        } else {
                            this.maxHeight=parseInt(window.getComputedStyle(  this.$refs.tableBox , null)["height"]);
                        }
                    }
                },
                immediate: true,
            },
            "dataTable": {
                handler(newName) {
                    let that = this;
                    if (that.disableSelect.boolean&&that.selection) {
                        that.dataTable.forEach((item)=>{
                            let numList = that.disableSelect.value.findIndex((dataNUm) => {
                              return   item[that.disableSelect.label] == dataNUm
                            });
                            if (numList !== -1) {
                                that.$set(item, '_disabled', true); //对象增加属性  或者修改属性
                            }
                        })
                    }
                    if (that.permissionRender) {
                        that.$nextTick(function () {
                            that.GlobalPermissionRender.render();
                        });
                    }
                    that.$emit('update:dataList', newName)   //绑定的方式导出
                },
                immediate: true,
                deep: true
            }
        }

    }
</script>
<style scoped>
    footer.page-link {
        z-index: 10;
        width: calc(100% - 40px);
        padding: 0;
        margin: 0;
        border: 0;
        bottom: 13px;
        padding-top: 13px;
        border-top: 1px solid #dcdee2;
        position: absolute;
    }
    .footerPage {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        color: black;
    }
    .pageContent {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        margin-right: 26px;
        font-size: 14px;
    }

    .selectStyle{
        width: 100px;
    }

    /deep/.ivu-table-wrapper-with-border{
        width: 100%;
    }
    /deep/ .form-group{
        margin: 0 10px;
    }
    /deep/.ivu-table-header thead tr th{
       text-align: center;
    }
    /deep/.ivu-table td, .ivu-table th{
        height: 40px;
    }
    /deep/.card-footer{
        height: 52px;
    }

    /deep/th .ivu-table-cell{
        padding: 0 5px;
    }

    /deep/.page-item.active .page-link{
        background-color: var(&#45;&#45;label-font-color, #5d8bc4);
    }
</style>
<style>
    .ivu-table-border:after{
        position: static;
        width: 0;
    }
</style>
&lt;!&ndash;
/deep/.ivu-table td.centerText{
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

{
title: "用户名",
key: "show_userName",
slot: "show_userName",
width: 100,
className: 'centerText'
},

getAxios: {
url: this.GlobalUrlPath.sthxTaskTaskInfo.query, //请求路径
method:"get" , //请求方式
dataList:{status: "8",} //请求参数
},

&ndash;&gt;





-->

